<template>
  <div id="qrcode"></div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: '',
  props: {
    Qwidth: {
      type: Number,
      default: 100
    },
    Qheight: {
      type: Number,
      default: 100
    },
    Qcontent: {
      type: String,
      default: '开心'
    },
    Qcolor: {
      type: String,
      default: '#000'
    },
    Qbackground: {
      type: String,
      default: '#fff'
    }
  },
  methods: {
    qrcodeFun () {
      this.qrcode = new QRCode('qrcode', {
        width: this.Qwidth,
        height: this.Qheight, // 高度
        text: this.Qcontent, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: this.Qcolor,
        foreground: this.Qbackground
      })
    }
  },
  mounted () {
    this.qrcodeFun()
    // this.QR = new QRCode(document.getElementById('qrcode'), 'http://www.runoob.com')
  },
  watch: {
    Qcontent () {
      this.qrcode.makeCode(this.Qcontent)
    }
  }
}

</script>
<style lang='stylus' scoped>

</style>
